<!DOCTYPE html>
<html lang="ru">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link rel="icon" type="image/x-icon" href="./favicon.png" />
		<title>itRoom( i o )</title>
		<link rel="stylesheet" href="./style.css" />
	</head>
	<body>
		<div class="wrapper-frame">
			<div class="frame">
				<div class="header">
					<button id="home">
						<svg
							width="30px"
							height="30px"
							viewBox="0 0 24 24"
							fill="none"
							xmlns="http://www.w3.org/2000/svg"
						>
							<path
								fill-rule="evenodd"
								clip-rule="evenodd"
								d="M12 3.1875L21.4501 10.275L21.0001 11.625H20.25V20.25H3.75005V11.625H3.00005L2.55005 10.275L12 3.1875ZM5.25005 10.125V18.75H18.75V10.125L12 5.0625L5.25005 10.125Z"
								fill="#fff"
							/>
						</svg>
					</button>
					<button id="about-us" class="rainbow-border">записаться</button>

					<button id="mus-control">
						<span class="ion"></span>
						<span class="ion"></span>
						<span class="ion"></span>
						<span class="ion"></span>
						<span class="ion"></span>
						<span class="ion"></span>
						<span class="ion"></span>
						<span class="ion"></span>
						<span class="ion"></span>
						<span class="ion"></span>
					</button>
				</div>

				<div class="greet-card">
					<section>
						<h2 id="log">
							itRoom<span class="marker-brackets">(</span
							><span class="marker-io">io</span
							><span class="marker-brackets">)</span>
						</h2>
						<div class="cnv-wrapper">
							<canvas id="cnvBones"></canvas>
						</div>
						<p>
							Добро пожаловать в <span class="rainbow-text-1">itRoom</span> —
							место, где учат быть программистом.
						</p>
						<p>
							В <span class="rainbow-text-2">itRoom</span>, где умение
							программировать становится реальностью, вы сможете раскрыть
							<span class="rainbow-text-3">свой потенциал</span>.
						</p>
						<p>
							Здесь вы погрузитесь в мир
							<span class="rainbow-text-4">безграничных возможностей</span>. В
							мир, который стал возможен благодаря информационным технологиям.
						</p>
						<p>
							Научитесь мыслить как программист, под руководством
							<span class="rainbow-text-5">опытных наставников</span> напишите
							собственные программы.
						</p>
						<p>
							Присоединяйтесь к нам сегодня и
							<span class="rainbow-text-3">напишите свое будущее!</span>
						</p>
						<p>
							Если вы
							<span class="rainbow-text-2">действительно хотите</span> учиться —
							мы очень рады, вы нам подходите!
						</p>
					</section>
					<div class="rainbow-border">
						<button id="stage1-btn" class="awesome-btn">
							<span class="rainbow-text-5">Далее</span>
						</button>
					</div>
				</div>

				<div class="stage1-card">
					<section>
						<p>
							В современном быстро меняющемся мире, овладение навыками
							<span class="rainbow-text-1">программирования</span> является
							необходимым условием сохранения конкурентоспособности.
						</p>
						<p>
							Технологии стали
							<span class="rainbow-text-2">движущей силой</span> личной
							продуктивности, автоматизации рутинных задач и ускорения развития.
						</p>
						<p>
							Многие специалисты, подстраиваясь под современные реалии,
							используют в своей повседневной профессиональной деятельности
							навыки программирования, что дает им очевидные
							<span class="rainbow-text-3">конкурентные приимущества</span>.
						</p>
						<p>
							Вы устали от поверхностного знакомства с технологиями? Не
							волнуйтесь, у нас есть
							<span class="rainbow-text-4">идеальное решение</span> для вас.
						</p>
						<p>
							Погрузитесь в мир современных технологий с помощью нашего
							комплексного курса программирования с
							<span class="rainbow-text-5">itRoom</span>.
						</p>
					</section>
					<div class="rainbow-border">
						<button id="end-btn" class="awesome-btn">
							<span class="rainbow-text-2">Записаться</span>
						</button>
					</div>
				</div>

				<div class="end-card">
					<p>
						<span class="rainbow-text-1"></span>
						Мы находимся по адресу: <br /><span class="rainbow-text-5"
							>г. Сургут, ул. Университетская, д. 10
							<br />
							Кабинет: 001
							<br />
						</span>
						Звоните нам по телефону: <br /><a
							href="tel:89935733753"
							class="phone-num-a"
							><span class="rainbow-text-3">8-993-573-37-53</span></a
						>
						<br />
						Или оставьте заявку ниже:
					</p>
					<div class="form-wrapp">
						<div class="message-wrapper rainbow-border">
							<div class="message">
								<p>
									<span class="rainbow-text-5">😺 Спасибо за заявку. 😺</span>
								</p>
								<p>
									<span class="rainbow-text-5"
										>Мы позвоним вам в ближайшее время.</span
									>
								</p>
							</div>
						</div>
						<input
							type="tel"
							data-tel-input
							placeholder="Телефон"
							maxlength="18"
							id="phone-input"
						/>
						<div class="phone-btn-border">
							<button disabled id="phone-btn" class="awesome-btn">
								<span class="phone-btn-text">Отправить</span>
							</button>
						</div>
					</div>
					<div class="map-wrapp">
						<div id="map" class="map"></div>
					</div>
					<p class="copyright">
						<span class="rainbow-text-5"
							>Создано командой<br />itRoom(😺)CatsDev<br />
							2023г</span
						>
					</p>
				</div>
			</div>
		</div>
		<script src="https://api-maps.yandex.ru/2.1/?apikey=ваш API-ключ&lang=ru_RU"></script>
		<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
		<script src="./main.js"></script>
	</body>
</html>
